<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../../../static/layui/css/layui.css">
    <script src="../../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../../static/layui/layui.js"></script>

</head>
<body>
<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="status" value="{{status}}" title="通过" lay-filter="lockDemo" {{ status == 1 ?'checked' : '' }}>
</script>


<table id="OnlinecourseList" lay-filter="test" lay-data="{id: 'courseNowRow'}"></table>



<script>
    layui.use('table', function () {
        var table = layui.table
            ,form = layui.form;

        //第一个实例
        table.render({
            elem: '#OnlinecourseList'
            , id: "courseNowRow"
            , title: "在线课程"
            , toolbar: 'default'
            , height: 550
            , even: true
           // , size: "lg"
            , url: '${pageContext.request.contextPath}/queryStudentOnlineCourse?studentId=${sessionScope.student.studentId}' //数据接口
            , page: true //开启分页
            //,totalRow:true
            ,cols: [[
                {type:'checkbox'}
                , {field: 'courseId', title: '课程ID', width: 80, align:'center', sort: true}
                , {field: 'courseName', title: '课程名称', width: 160, align:'center', sort: true}
                , {field: 'courseType', title: '课程类型', width: 120, align:'center', sort: true}
                , {field: 'courseCredit', title: '课程学分', width: 100, align:'center', sort: true}
                , {field: 'courseHour', title: '课程学时', width: 100, align:'center', sort: true}
                , {field: 'courseVolume', title: '可容纳人数', width: 110, align:'center', sort: true}
                , {field: 'teacherId', title: '教师ID', width: 100, align:'center', sort: true}
               // , {field: 'status', title: '状态',templet: '#checkboxTpl',width: 100, sort: true}
                , {field: 'courseDesc', title: '课程描述', align:'center', width: 135}
            ]]
        });


        //监听行单击事件
        table.on('row(test)', function(obj){
            // console.log(obj.tr) //得到当前行元素对象
            console.log(obj.data)
            var data = obj.data;
            layer.msg("课程名："+data.courseName) //得到当前行数据

            //obj.del(); //删除当前行
            //obj.update(fields) //修改当前行数据
        });

        //监听事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    var data =  checkStatus.data;
                    if(data.length!=0) {
                        var courseList = new Array(data.length);
                        // 获取课程列表
                        for(var i=0;i<data.length;i++)
                        {
                            var selectCourse = {
                                "courseId":data[i].courseId,
                                "studentId":'${sessionScope.student.studentId}',
                                "teacherId":data[i].teacherId
                            };

                            courseList[i] = selectCourse;
                        }
                        // 添加课程
                        $.post(
                             "${pageContext.request.contextPath}/studentAddCourse",
                            JSON.stringify(courseList),
                            function (data) {
                                layer.msg("成功添加:"+data+"门课程!",{icon:"6"});
                                //window.location.reload();//刷新当前页面
                                location.reload();
                            }

                        );
                    }

                    break;
                case 'delete':
                    layer.msg('删除~ 暂不开放！',{icon:"5"});
                    break;
                case 'update':
                    layer.msg('编辑~ 暂不开放！',{icon:"5"});
                    break;
            };
        });

        //监听锁定操作
        form.on('checkbox(lockDemo)', function(obj){
            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
        });

    });



</script>


</body>
</html>
